




<template>
  <div class="hello">
    <h1> 一起学习 axios</h1>

  </div>
</template>

<script>
  import axios from 'axios';
  import queryString from 'queryString'

  var CancelToken = axios.CancelToken;
  var source = CancelToken.source();
  var HTTP = axios.create({
    baseURL: 'http://106.12.14.210:7300/mock/5b6eedb05f7323fd536a9ebb/example/',
    timeout: 1000,
    headers: {
      'custome-header': 'miaov',
      'content-type': 'application/x-www-form-urlencoded' //支持字符串拼接的形式 (miaov=ketang&name=dengwubo)
    },
    responseType: 'json',
    transformRequest: [function (data) { // 发送之前可以对数据进行处理
      return queryString.stringify(data);
    }],
    transformResponse: [function (data) { // 改变响应数据
      return data
    }],
    validateStatus(status) {  // 改变响应状态码
      return status;
    }

  });
  HTTP.interceptors.request.use(function (config) {
    //在发送请求之前做某事
    console.log("拦截请求....")
    console.log(config)
    return config;
  }, function (error) {
    // 请求错误时做某事
    return Promise.reject(error);
  });

  HTTP.interceptors.response.use(function (data) {
    console.log("拦截响应....")
    console.log(data)
    return data
  });


  export default {

    created() {
      function http1() {
        return HTTP.get('test-axios');
      }

      function http2() {
        return HTTP.post('test-post');
      }


      axios.all([http1(), http2()])
        .then(axios.spread((res1, res2) => {
          console.log(res1);
          console.log(res2);

        })).catch(err => {
        console.log(err)
      })


    }

  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

